<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>北极光之夜。</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			background-image: radial-gradient(white, black);
		}
		.kuang {
			position: relative;
			width: 400px;
			height: 250px;
			cursor: pointer;
		}
		.item {
			position: absolute;
			top: 0;
			left: 0;
			width: 400px;
			height: 250px;
			transition: all 1.5s;
		}
		.item img {
			width: 100%;
			height: 100%;
		}
		.kuang .left {
			left: -200px;
			filter: blur(6px);
			z-index: 3;
		}
		.kuang .middle {
			left: 0px;
			transform: scale(1.3);
			z-index: 4;
		}
		.kuang .right {
			left: 200px;
			filter: blur(6px);
			z-index: 3;
		}
		.xiaoshi {
			left: 0px;
			z-index: 1;
			
		}
	</style>
</head>
<body>
	<div class="kuang">
		<div class="kuang">
			<div class="item "><img src="4.jpg"></div>
			<div class="item "><img src="5.jpg"></div>
			<div class="item "><img src="6.jpg"></div>
			<div class="item "><img src="7.jpg"></div>
			<div class="item "><img src="8.jpg"></div>
			<div class="item left"><img src="1.jpg"></div>
			<div class="item middle"><img src="2.jpg"></div>
			<div class="item right"><img src="3.jpg"></div>
		</div>
	</div>
	
	
	<script>
		var items = document.querySelectorAll('.item');
		for ( var i = 0; i < items.length; i++ ) {
			items[i].addEventListener('click', function () {
				for ( let j = 0; j < items.length; j++ ) {
					items[j].classList.remove('left', 'right', 'middle');
					items[j].classList.add('xiaoshi');
				}
				
				this.classList.remove('left', 'middle', 'right');
				this.classList.add('middle');
				
				let left = this.previousElementSibling ?? items[items.length - 1];
				left.classList.add('left');
				
				let right = this.nextElementSibling ?? items[0];
				right.classList.add('right');
			})
		}
	</script>
</body>
</html>
